<template>
  <div class="_wz_cent_main _wz_dept">
    <Card dis-hover :bordered="true">
      <div>
        <div style="float: left;margin: 0 10px;">
          <viewer style="width: 50px;height: 50px;margin: auto;display: block;">
            <img style="width: 100%;height: 100%;margin: auto;display: block;border-radius: 50%;background: #fff;border: 1px solid #fff;" :src="!!userInfoData&&!!userInfoData.logoUrl?apiUrl.imgUrl+userInfoData.logoUrl:'../../static/img/touxiang.png'" @error="public.imgDispose">
          </viewer>
        </div>
        <div style="float: left;">
          <div style="line-height: 30px;font-weight: 600;font-size: 14px;" :style="{'line-height':!!theWeather?'30px':'50px'}">
            <span style="">你好，{{ !!userInfoData ? userInfoData.name : '用户' }}，开启您一天的工作吧！</span>
            <span>{{ !!userInfoData ? userInfoData.deptName : '--' }}</span>
          </div>
          <div style="color: #515a6e;" v-if="!!theWeather">
            <span style="margin: 0 5px 0 0;">{{ !!theWeather ? theWeather.city : '' }}</span>
            <span style="margin: 0 5px;">{{ !!theWeather ? theWeather.forecast[0].date : '' }}</span>
            <span style="margin: 0 5px;">{{ !!theWeather ? theWeather.forecast[0].fengxiang : '' }}</span>
            <span style="margin: 0 5px;">{{ !!theWeather ? theWeather.forecast[0].high : '' }}</span>
            <span style="margin: 0 5px;">{{ !!theWeather ? theWeather.forecast[0].low : '' }}</span>
            <span style="margin: 0 5px;">{{ !!theWeather ? theWeather.forecast[0].type : '' }}</span>
            <span style="margin: 0 5px;">{{ !!theWeather ? theWeather.ganmao : '' }}</span>
          </div>
        </div>
        <div style="clear: both;"></div>
      </div>
    </Card>

    <Row :gutter="10" style="margin: 10px -5px 0;" class="_wz_dept_cent">
      <i-col span="19" style="height:100%;">
        <Row :gutter="10" style="margin: 0 -5px;">
          <i-col span="12" style="height:100%;">
            <Card dis-hover :bordered="true">
              <p slot="title">基础数据</p>
              <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
                <i-col span="6" style="height: 100%;text-align: center;">
                  <div style="font-size: 18px;color: #75adf9;line-height: 30px;">{{ !!mainStatistics.coreCount?mainStatistics.coreCount.coreVehicleCount:0 }}</div>
                  <div style="font-size: 12px;color: #ada2a2;">车辆总数</div>
                </i-col>
                <i-col span="6" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                  <div style="font-size: 18px;color: #62a3cb;line-height: 30px;">{{ !!mainStatistics.coreCount?mainStatistics.coreCount.coreTrailerCount:0 }}</div>
                  <div style="font-size: 12px;color: #ada2a2;">挂车总数</div>
                </i-col>
                <i-col span="6" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                  <div style="font-size: 18px;color: #7577ea;line-height: 30px;">{{ !!mainStatistics.coreCount?mainStatistics.coreCount.coreDriverCount:0 }}</div>
                  <div style="font-size: 12px;color: #ada2a2;">人员总数</div>
                </i-col>
                <i-col span="6" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                  <div style="font-size: 18px;color: #68a9ce;line-height: 30px;">{{ !!mainStatistics.coreCount?mainStatistics.coreCount.coreDeptCount:0 }}</div>
                  <div style="font-size: 12px;color: #ada2a2;">企业总数</div>
                </i-col>
              </Row>
            </Card>
          </i-col>
          <i-col span="6" style="height:100%;">
            <Card dis-hover :bordered="true">
              <p slot="title">从业人员</p>
              <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
                <i-col span="12" style="height: 100%;text-align: center;">
                  <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!mainStatistics.coreDriverToDo?mainStatistics.coreDriverToDo.coreDriverBindingCount:0}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">待审核</div>
                </i-col>
                <i-col span="12" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                  <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!mainStatistics.coreDriverToDo?mainStatistics.coreDriverToDo.coreDriverUnAuthCount:0}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">待授权</div>
                </i-col>
              </Row>
            </Card>
          </i-col>
          <i-col span="6" style="height:100%;">
            <Card dis-hover :bordered="true">
              <p slot="title">通知消息</p>
              <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
                <i-col span="12" style="height: 100%;text-align: center;">
                  <div style="font-size: 18px;color: #ff9900;line-height: 30px;">{{!!mainStatistics.noticeDeptToDo?mainStatistics.noticeDeptToDo.noticeUnReadCount:0}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">待签收</div>
                </i-col>
                <i-col span="12" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
                  <div style="font-size: 18px;color: #19be6b;line-height: 30px;">{{!!mainStatistics.noticeDeptToDo?mainStatistics.noticeDeptToDo.noticeUnReplyCount:0}}</div>
                  <div style="font-size: 12px;color: #ada2a2;">待回复</div>
                </i-col>
              </Row>
            </Card>
          </i-col>
        </Row>
        <Row :gutter="10" style="margin: 10px -5px;height: 300px;">
          <i-col span="6" style="height:100%;">
            <Card dis-hover :bordered="true" style="height:100%;">
              <p slot="title">从业身份统计</p>
              <div style="height:100%;" ref="bingTuH">
                <bingTu :topHeight="bingTuHeight" v-if="bingTuHeight != 0 && driverAuth.driverAuthType" :bingTuData="driverAuth"></bingTu>
              </div>
            </Card>
          </i-col>
          <i-col span="18" style="height:100%;">
            <Card dis-hover :bordered="true" style="height:100%;">
              <p slot="title">车辆、挂车年限统计</p>
              <div style="height: 100%;">
                <lineChart6 :bottomHeight="bingTuHeight" v-if="bingTuHeight !== 0 && lineChart6PoliceData.type" :lineChart6Data="lineChart6PoliceData"></lineChart6>
              </div>
            </Card>
          </i-col>
        </Row>

        <Row :gutter="10" style="margin: 0 -5px;height: calc(100% - 157px - 10px - 300px - 10px);">
          <i-col span="12" style="height:100%;">
            <Card dis-hover :bordered="true" style="height:100%;">
              <p slot="title">近日报警次数统计</p>
              <div style="height:100%;">
                <lineChart2 :bottomHeight="lineChartHeight" v-if="lineChartHeight != 0 && lineChart2Data1.type" :lineChart2Data="lineChart2Data1"></lineChart2>
              </div>
            </Card>
          </i-col>
          <i-col span="12" style="height:100%;">
            <Card dis-hover :bordered="true" style="height: 100%;">
              <p slot="title">年度教育培训统计</p>
              <div style="height:100%" ref="lineChart">
                <regionalDiscount :leftHeight="lineChartHeight" v-if="lineChartHeight !== 0 && homeAnalysisLoanMonthNum.type" :homeAnalysisLoanMonthNum="homeAnalysisLoanMonthNum"></regionalDiscount>
              </div>
            </Card>
          </i-col>
        </Row>
      </i-col>
      <i-col span="5" style="height:100%;">
        <Card dis-hover :bordered="true">
          <p slot="title">隐患整改统计</p>
          <Row :gutter="10" style="height:100%;margin: 10px 0;padding: 10px 10px;">
            <i-col span="12" style="height: 100%;text-align: center;">
              <div style="font-size: 18px;color: #ff9900;line-height: 30px;">0</div>
              <div style="font-size: 12px;color: #ada2a2;">待签收</div>
            </i-col>
            <i-col span="12" style="height: 100%;text-align: center;border-left: 1px solid #e8eaec;">
              <div style="font-size: 18px;color: #19be6b;line-height: 30px;">0</div>
              <div style="font-size: 12px;color: #ada2a2;">待回复</div>
            </i-col>
          </Row>
        </Card>

        <Card dis-hover :bordered="true" style="margin: 10px 0;height: 300px;">
          <p slot="title">在线车辆统计</p>
          <div style="height: 100%;">
            <div id="customer1" style="height: 100%;overflow: hidden"></div>
          </div>
        </Card>



        <Card dis-hover :bordered="true" style="height: calc(100% - 157px - 10px - 300px - 10px);">
          <p slot="title">机务待办统计</p>
          <div style="height: 100%;" ref="lineChart3">
            <line-chart3 :bottomHeight="lineChart3Height" v-if="lineChart3Height !== 0 && lineChart6PoliceData1.type" :lineChart3Data="lineChart6PoliceData1"></line-chart3>
          </div>
        </Card>
      </i-col>
    </Row>


    <Spin size="large" fix v-if="spinShow"></Spin>
  </div>
</template>
<script>
import bingTu from "../../components/Chart/lineChart/bingTu";
import regionalDiscount from "../Chart/lineChart/regionalDiscount";
import lineChart6 from "../Chart/lineChart/lineChart6";
import lineChart3 from '../../components/Chart/lineChart/lineChart3.vue'
import lineChart2 from "../Chart/lineChart/lineChart2";

export default {
  components: {
    lineChart3,
    regionalDiscount,
    bingTu,
    lineChart6,
    lineChart2,//
  },
  data() {
    return {
      spinShow:false,//本页加载
      userInfoData: null,//用户信息
      theWeather: null,//天气
      realTime: '',//时间定时
      lunarCalendar: '',//农历

      lineChart3Height:0,
      bingTuHeight: 0,
      lineChartHeight:0,
      mainStatistics:{},
      driverAuth: {//授权
        "id": "driverAuth",
        "data": [],
        "unit": "人",
        "style": {
          "padding": [20, 20, 80, 20]
        },
        driverAuthType: false,
      },

      lineChart6PoliceData: {//车辆、挂车年限统计
        type: false,
        "id": "charId7",
        "data": [],
        "unit": "公里",
        "style": {
          "padding": [30, 38, 30, 38]
        }
      },

      lineChart6PoliceData1: {
        type: false,
        "id": "charId6",
        "data": [],
        "unit": "待办",
        "style": {
          "padding": [30, 30, 40, 50]
        }
      },


      homeAnalysisLoanMonthNum: {
        type: false,
        "id": "charId9",
        "data": [],
        "unit": "完成率",
        "style": {
          "padding": [30, 20, 30, 60]
        },
        list:true,
      },


      lineChart2Data1: {
        type: false,
        "id": "charId1",
        "data": [],
        "unit": "",
        "style": {
          "padding": [20, 30, 30, 40]
        }
      },

    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;


    that.$nextTick(function () {
      that.bingTuHeight = that.$refs.bingTuH.offsetHeight;
      that.lineChartHeight = that.$refs.lineChart.offsetHeight;
      that.lineChart3Height = that.$refs.lineChart3.offsetHeight;
      window.onresize = function () {
        that.bingTuHeight = that.$refs.bingTuH.offsetHeight;
        that.lineChartHeight = that.$refs.lineChart.offsetHeight;
        that.lineChart3Height = that.$refs.lineChart3.offsetHeight;
      };
    })

    //如果有存储用户数据 触发
    if (!!sessionStorage.getItem('loginData')) {
      that.userInfoData = JSON.parse(sessionStorage.getItem('loginData')).user;
    }


    that.timelyManner();
    setInterval(function () {
      that.timelyManner();
    }, 1000)
    //实例化城市查询类
    var map = new AMap.Map('', {
      resizeEnable: true
    });
    //天气
    AMap.plugin('AMap.Weather', function () {//加载天气查询插件
      var weather = new AMap.Weather(); //创建天气查询实例



      weather.getLive(map.getAdcode(), function (err, data) {//执行实时天气信息查询
        // console.log(data)
        // that.axios.get("https://api.map.baidu.com/weather/v1/?district_id="+data.adcode+"&data_type=all&ak=2pSikfIkbZoTq08A05sOFFeMA4XpQX2C", {}).then(res => {
        //
        // }).catch(err => {
        //   console.log('失败', err);
        // })
        that.axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + data.city, {}).then(res => {
          that.theWeather = res.data.data;
        }).catch(err => {
          console.log('失败', err);
        })
      });
    });


    that.spinShow = true;
    that.axios.post(that.apiUrl.webApi + "/statistics/pc/mainStatistics",{}).then(res => {
      that.spinShow = false;
      if (!!res) {
        that.mainStatistics = res.data.data;
        //从业身份统计
        that.driverAuth.data = [
          {'item': '驾驶员', "percent": that.mainStatistics.coreDriverType.coreDriverJSY},
          {'item': '押运员', "percent": that.mainStatistics.coreDriverType.coreDriverYYY},
          {'item': '装卸员', "percent": that.mainStatistics.coreDriverType.coreDriverZXY},
          {'item': '安全管理人员', "percent": that.mainStatistics.coreDriverType.coreDriverAQGL},
          {'item': '安全负责人', "percent": that.mainStatistics.coreDriverType.coreDriverAQFZ},
          {'item': '其他', "percent": that.mainStatistics.coreDriverType.coreDriverQT},
        ];
        that.driverAuth.driverAuthType = true;


        //车辆、挂车年限统计
        that.lineChart6PoliceData.data = [
          {company: '车辆',type:'一年',value:that.mainStatistics.coreVehicleYear.vehicleFiveYear},
          {company: '车辆',type:'两年',value:that.mainStatistics.coreVehicleYear.vehicleForeYear},
          {company: '车辆',type:'三年',value:that.mainStatistics.coreVehicleYear.vehicleOneYear},
          {company: '车辆',type:'四年',value:that.mainStatistics.coreVehicleYear.vehicleNullYear},
          {company: '车辆',type:'五年',value:that.mainStatistics.coreVehicleYear.vehicleThreeYear},
          {company: '车辆',type:'无登记',value:that.mainStatistics.coreVehicleYear.vehicleTwoYear},

          {company: '挂车',type:'一年',value:that.mainStatistics.trailerYear.coreTrailerOneYear},
          {company: '挂车',type:'两年',value:that.mainStatistics.trailerYear.coreTrailerTwoYear},
          {company: '挂车',type:'三年',value:that.mainStatistics.trailerYear.coreTrailerThreeYear},
          {company: '挂车',type:'四年',value:that.mainStatistics.trailerYear.coreTrailerForeYear},
          {company: '挂车',type:'五年',value:that.mainStatistics.trailerYear.coreTrailerFiveYear},
          {company: '挂车',type:'无登记',value:that.mainStatistics.trailerYear.coreTrailerNullYear},
        ];
        that.lineChart6PoliceData.type = true;

        //机务待办统计
        that.lineChart6PoliceData1.data = [
          {year: '保险机务',sales:that.mainStatistics.managementToDo.insuranceToDoCount },
          {year: '维保机务',sales:that.mainStatistics.managementToDo.maintainToDoCount },
          {year: '北斗机务',sales:that.mainStatistics.managementToDo.terminalToDoCount },
          {year: '营运机务',sales:that.mainStatistics.managementToDo.operationCertificateToDoCount },
          {year: '年检机务',sales:that.mainStatistics.managementToDo.annualInspectToDoCount },
          {year: '车船税机务',sales:that.mainStatistics.managementToDo.trailerVesselTaxToDoCount },
        ];
        that.lineChart6PoliceData1.type = true;



        //教育
        var homeAnalysisLoanMonthNum = [];
        that.mainStatistics.educateToDo.forEach((k, i) => {
          homeAnalysisLoanMonthNum.push({'year': k.name ,"value": parseFloat(k.value) });
        })
        that.homeAnalysisLoanMonthNum.data = homeAnalysisLoanMonthNum;
        that.homeAnalysisLoanMonthNum.type = true;



        //报警
        var alarmMonthStatistics = [];
        that.mainStatistics.alarmMonthStatistics.forEach((k, i) => {
          alarmMonthStatistics.push({month: k.name,city: '报警趋势',temperature: k.value});
        })
        that.lineChart2Data1.data = alarmMonthStatistics;
        that.lineChart2Data1.type = true;

        var vehicleOnLine = [
          {name:'在线',value:!!that.mainStatistics.vehicleOnLine.vehicleOnLineCount?that.mainStatistics.vehicleOnLine.vehicleOnLineCount:0},
          {name:'离线',value:!!that.mainStatistics.vehicleOnLine.vehicleOffLineCount?that.mainStatistics.vehicleOnLine.vehicleOffLineCount:0},
          {name:'未知',value:!!that.mainStatistics.vehicleOnLine.vehicleUnknownCount?that.mainStatistics.vehicleOnLine.vehicleUnknownCount:0},
        ];
        that.customer("customer1",vehicleOnLine);

      }
    }).catch(err => {
      console.log('失败', err);
    })


  },
  methods: {//执行的方法
    timelyManner() {
      var that = this;
      that.realTime = that.public.timeFormatting(new Date(), "hh:mm:ss")
      var date = new Date();
      var yy = date.getFullYear();
      var mm = date.getMonth() + 1;
      var dd = date.getDate();
      var data = that.public.calendar.solar2lunar(yy, mm, dd)
      that.lunarCalendar = data.IMonthCn + data.IDayCn;
    },
    customer(name,data) {
      var that = this
      data.forEach(function(k, i) {
        k.item = k.name
        k.count = k.value
      })
      var chart = new G2.Chart({
        container: name,
        forceFit: true,
        height: that.bingTuHeight,
        padding: [20, 0, 50, 0],
        animate: false
      })
      chart.source(data, {
        count: {
          formatter: function formatter(val) {
            return val
          }
        }
      })
      chart.coord('theta', {
        radius: 0.75,
        innerRadius: 0.6
      })
      chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      })
      var interval = chart.intervalStack().position('count').color('item').label('count', {
        formatter: function formatter(val, item) {
          return item.point.item + ': ' + val
        }
      }).tooltip('item*count', function(item, count) {
        return {
          name: item,
          value: count
        }
      }).style({
        lineWidth: 1,
        stroke: '#fff'
      })
      chart.render()
      interval.setSelected(data[0])

    },

  },
  watch: {//监听

  },
  props: {//接收来自父组件的数据

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>

<style lang="less">
._wz_dept {
  height: 907px !important;
  ._wz_dept_cent {
    height: calc(100% - 85px - 10px);
    .ivu-card-body {
      padding: 8px !important;
      height: calc(100% - 51px);
    }
  }
}
</style>
